<script lang="ts" setup>
import type { EChartsOption } from 'echarts';
import echarts from '@/plugins/echarts';
import { debounce } from 'lodash-es';
import 'echarts-wordcloud';
import { propTypes } from '@/utils/propTypes';
import { PropType } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { isString } from '@/utils/is';
import { useDesign } from '@/hooks/web/useDesign';

import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markArea';

defineOptions({ name: 'EChart' });

const { getPrefixCls, variables } = useDesign();
const prefixCls = getPrefixCls('echart');
const appStore = useAppStore();

// 组件 props 定义（保持不变）
const props = defineProps({
  options: {
    type: Object as PropType<EChartsOption>,
    required: true,
  },
  width: propTypes.oneOfType([Number, String]).def(''),
  height: propTypes.oneOfType([Number, String]).def('500px'),
});

// 1. 修正主题逻辑：只返回字符串类型的主题名（而非 boolean）
const theme = computed(() => {
  // ECharts 主题只能是字符串（如 'light'、'dark' 或自定义主题名）
  return appStore.getIsDark ? 'dark' : 'light';
});

// 2. 移除对 props.options 的污染，直接使用原始 options
const elRef = ref<ElRef>();
let echartRef: Nullable<echarts.ECharts> = null;
const contentEl = ref<Element>();

const styles = computed(() => {
  const width = isString(props.width) ? props.width : `${props.width}px`;
  const height = isString(props.height) ? props.height : `${props.height}px`;
  return { width, height };
});

// 3. 初始化图表时传入主题（正确的主题设置方式）
const initChart = () => {
  if (unref(elRef) && props.options) {
    // 初始化时指定主题（theme.value 为 'light' 或 'dark'）
    echartRef = echarts.init(unref(elRef) as HTMLElement, unref(theme));
    // 直接使用纯净的 props.options（符合 EChartsOption 类型）
    echartRef?.setOption(props.options);
  }
};

// 4. 监听主题变化时重新初始化图表（而非修改 options）
watch(
  theme,
  () => {
    // 主题变化时销毁旧实例，用新主题重新初始化
    if (echartRef) {
      echartRef.dispose();
      initChart();
    }
  }
);

// 5. 监听原始 options 变化（保持纯净的 EChartsOption 类型）
watch(
  () => props.options,
  (newOptions) => {
    if (echartRef) {
      echartRef?.setOption(newOptions);
    }
  },
  { deep: true }
);

// 其他生命周期和 resize 逻辑保持不变...
const resizeHandler = debounce(() => {
  if (echartRef) echartRef.resize();
}, 100);

const contentResizeHandler = async (e: TransitionEvent) => {
  if (e.propertyName === 'width') resizeHandler();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', resizeHandler);
  contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0];
  unref(contentEl) && (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler);
  unref(contentEl) && (unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler);
  if (echartRef) echartRef.dispose(); // 销毁实例
});

onActivated(() => {
  if (echartRef) echartRef.resize();
});
</script>

<template>
  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
</template>
